<template>
  <div class="paper-list">
    <!-- 搜索和操作栏 -->
    <div class="operation-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索试卷名称"
        class="search-input"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="$router.push('/paper/add')">
        <el-icon> <Plus /> </el-icon>创建试卷
      </el-button>
    </div>

    <!-- 试卷列表 -->
    <el-card class="paper-table">
      <el-table
        v-loading="loading"
        :data="paperList"
        style="width: 100%"
        border
        @row-click="handleView"
      >
        <el-table-column prop="index" label="序号" min-width="80"  sortable/>
        <el-table-column prop="paperName" label="试卷名称" min-width="120" sortable/>
        <el-table-column prop="questionCount" label="题目数量" min-width="120" sortable/>
        <el-table-column prop="totalScore" label="总分" min-width="100" sortable/>
        <el-table-column prop="duration" label="考试时长(分钟)" min-width="150" sortable/>
        <el-table-column prop="isPublic" label="公开" min-width="80" sortable />
        <el-table-column prop="createdTime" label="创建时间" min-width="180" sortable/>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click.native.stop="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click.native.stop="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="30%">
      <span>确定要删除试卷 "{{ currentPaper?.paperName }}" 吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Plus } from "@element-plus/icons-vue";
import { paperApi } from "../../api/paperApi";

const router = useRouter();
const loading = ref(false);
const paperList = ref([]);
const searchQuery = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const deleteDialogVisible = ref(false);
const currentPaper = ref(null);

// 获取试卷列表
const getPaperList = async () => {
  loading.value = true;
  try {
    const res = await paperApi.getPaperPage({
      pageNumber: currentPage.value,
      pageSize: pageSize.value,
      paperName: searchQuery.value,
    });
    paperList.value = res.result.data;
    paperList.value.forEach((paper, index) => {
      paper.index = (currentPage.value - 1) * pageSize.value + index + 1;
      paper.isPublic = paper.isPublic ? "是" : "否";
    });
    total.value = res.result.total;
  } catch (error) {
    console.error("获取试卷列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  getPaperList();
};

// 查看试卷
const handleView = (row) => {
  router.push(`/paper/${row.paperId}`);
};

// 编辑试卷
const handleEdit = (row) => {
  router.push(`/paper/${row.paperId}/edit`);
};

// 删除试卷
const handleDelete = (row) => {
  currentPaper.value = row;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = async () => {
  try {
    await paperApi.deletePaper(currentPaper.value.paperId);
    ElMessage.success("删除成功");
    deleteDialogVisible.value = false;
    getPaperList();
  } catch (error) {
    console.error("删除试卷失败:", error);
  }
};

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  getPaperList();
};

// 页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getPaperList();
};

onMounted(() => {
  getPaperList();
});
</script>

<style scoped>
.paper-list {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 300px;
}

.paper-table {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
